<template>
    <view class="create-menu">
        <view class="menu-title">
            <text>选择转移责任人</text>
        </view>
        <view style="height: calc(100% - 450rpx);">
            <view style="display: flex;justify-content: space-between;align-items: center;">
                <u-search placeholder="请输入姓名" @clear="cancelSearch" shape="square" :show-action="false" @change="searchFun"
                    v-model="search" class="u-p-t-10 u-p-b-10" clearable></u-search>
            </view>
            <scroll-view style="height: calc(100% - 80rpx);" scroll-y="true">
                <view v-if="showListData.length">
                    <view class="list">
                        <view v-for="(item, index) in showListData" :key="index" :class="{'list-item-active': selectedItemStyle(item)}"
                            class="list-item" @click="selectItemFun(item)">
                            <text>{{ item.realname }} -- {{ item.mobile }}</text>
                            <u-icon name="checkbox-mark" v-if="selectedItemStyle(item)"></u-icon>
                        </view>
                    </view>
                </view>
                <u-empty v-else mode="list"></u-empty>
            </scroll-view>
        </view>
        <view style="padding-top:20rpx;">
            <view style="margin: 10rpx 0;display: flex;">
                <view style="min-width: 250rpx;">选择责任人为：</view>
                <text>{{transferInfo.newOwnerUserName}}</text>
            </view>
            <view style="margin: 10rpx 0;display: flex;">
                <view style="min-width: 250rpx;">将原责任人：</view>
                <u-tag :text="item.text" style="margin-right: 10rpx;" type="primary" @click="selectValue(1,item)" :mode="transferInfo.transferType == item.id ? 'dark' : 'plain'"
                    v-for="(item,index) in transferTypes" :key="index"></u-tag>
            </view>
            <view style="margin: 10rpx 0;display: flex;" v-if="transferInfo.transferType == 2">
                <view style="min-width: 250rpx;">权限：</view>
                <u-tag :text="item.text" style="margin-right: 10rpx;" type="primary" @click="selectValue(2,item)" :mode="transferInfo.power == item.id ? 'dark' : 'plain'"
                    v-for="(item,index) in powers" :key="index"></u-tag>
            </view>
            <view style="margin: 10rpx 0;display: flex;">
                <view style="min-width: 250rpx;">同时变更负责人至：</view>
                <view style="display: flex;flex-wrap: wrap">
                    <u-tag :text="item.text" style="margin-right: 10rpx;margin-bottom: 5px" type="primary" @click="selectValue(3,item)" :mode="transferInfo.changeTypes.some(id => {return id == item.id})  ? 'dark' : 'plain'"
                        v-for="(item,index) in changeTypes" :key="index"></u-tag>
                </view>
            </view>
            <u-button style="margin-top: 20rpx;" type="warning" @click="submitTransferInfo">提交</u-button>
        </view>
    </view>
</template>

<script>
    import {
        crmCustomerQueryContacts,
    } from "@/api/customer/customer.js";
    import {
        usersList,
    } from "@/api/common.js";
    export default {
        data() {
            return {
                listData: [],
                showListData: [],
                search: '',
                totalNum: 0,
                pageSize: 15,
                currentPage: 1,
                scrollTop: 0,
                transferTypes: [{
                    id: 1,
                    text: '移出'
                }, {
                    id: 2,
                    text: '转为团队成员'
                }],
                powers: [{
                    id: 1,
                    text: '只读'
                }, {
                    id: 2,
                    text: '读写'
                }],
                changeTypes: [{
                    id: 3,
                    text: '联系人'
                }, {
                    id: 5,
                    text: '商机'
                }, {
                    id: 6,
                    text: '合同'
                }, {
                    id: 11,
                    text: '设备清单'
                }, {
                    id: 750,
                    text: '报价'
                }],
                transferInfo: {
                    newOwnerUserId: 0,
                    newOwnerUserName: '',
                    transferType: 1,
                    power: 1,
                    customerIds: this.value,
                    changeTypes: [3,5,6,11,750]
                }
            }
        },
        props: {
            /** 值 */
            value: {
                type: [String, Number],
                default: ''
            },
            /**
             *  多选按钮
             */
            radio: {
                type: Boolean,
                default: false
            }

        },
        computed: {


        },
        created() {
            this.getUserList();
        },
        methods: {
            selectedItemStyle(item) {
                if (item.userId == this.transferInfo.newOwnerUserId) {
                    return true;
                }
                return false;
            },

            selectItemFun(item) {
                if (this.radio) {
                    this.transferInfo.newOwnerUserId = item.userId;
                    this.transferInfo.newOwnerUserName = item.realname;
                }
                // this.valueChange();
            },
            valueChange() {
                this.$emit('value-change', this.dataValue)
            },

            scroll(e) {
                this.scrollTop = e.detail.scrollTop
            },

            getUserList(type) {
                let self = this;
                let params = {
                    pageType: 0
                }
                usersList(params).then(res => {
                    self.listData = res.data;
                    self.showListData = res.data;
                })
            },

            cancelSearch() {
                this.scrollTop = 0;
                this.search = '';
            },

            searchFun() {
                this.scrollTop = 0;
                this.showListData = this.listData.filter(item => {
                    return item.realname.indexOf(this.search) != -1
                })
            },

            selectValue(type, item) {
                switch (type) {
                    case 1:
                        this.transferInfo.transferType = item.id;
                        break;
                    case 2:
                        this.transferInfo.power = item.id;
                        break;
                    case 3:
                        let isSelected = this.transferInfo.changeTypes.some(id => {
                            return id == item.id
                        })
                        if (isSelected) {
                            let index = this.transferInfo.changeTypes.findIndex(id => id == item.id);
                            this.transferInfo.changeTypes.splice(index, 1);
                        } else {
                            this.transferInfo.changeTypes.push(item.id)
                        }
                        break;
                }
            },

            submitTransferInfo() {
                if(!this.transferInfo.newOwnerUserId){
                    this.$u.toast("请选择用户")
                    return;
                }
                let params = {};
                params.newOwnerUserId = this.transferInfo.newOwnerUserId;
                if(this.transferInfo.transferType == 2){
                    params.power = this.transferInfo.power;
                }
                params.transferType = this.transferInfo.transferType;
                params.customerIds = this.transferInfo.customerIds;
                let changeTypes = "";
                this.transferInfo.changeTypes.map((item,index) => {
                    if(index == this.transferInfo.changeTypes.length - 1){
                        changeTypes += item;
                    }else{
                        changeTypes += item + ','
                    }
                })
                params.changeTypes = changeTypes;
                this.$emit("value-change",params)
            }
        }
    }
</script>

<style lang='scss' scoped>
    .xh-view {
        width: 100%;
    }

    .my-popup /deep/ .u-close--top-right {
        top: 20rpx !important;
    }

    .my-popup /deep/ .u-drawer-content {
        height: 75% !important;
    }

    .create-menu {
        position: relative;
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 5px 5px 0 0;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .menu-title {
        text-align: center;
        height: 80rpx;
        font-size: 35rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #efeff4;
    }

    .menu-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-item {
        width: 120rpx;
        height: 120rpx;
        font-size: 22rpx;
        line-height: 120rpx;
        text-align: center;
        background-color: orange;
        color: #FFFFFF;
        border-radius: 5px;
        margin-right: 10px;
    }

    .list {
        width: 100%;
        min-height: calc(100%-40rpx);
        flex: 1;
    }

    .list-item {
        line-height: 80rpx;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        justify-content: space-between;

        &:active {
            background-color: #f3f4f6;
        }
    }

    .list-item-active {
        color: #2979ff;
    }

    .select-item {
        margin: 10rpx 0;
        text-align: center;
        display: flex;
        align-items: center;
    }
</style>
